<!-- 本页样式 -->
<style scoped> 
    .del-dialog-cnt {
        font-size: 16px;
        text-align: center
    } 
    .footer{
        text-align: center
    }
</style>
<!-- 页面布局-->
<template>
<div>
    <div class="table">
        <!-- 标题导航栏 --> 
        <!-- 主体区 -->
        <div class="container">
            <!-- 查询条件 --> 
            <!-- 查询条件END -->
            <!-- 数据列表 -->
            <div class="grid-data-box">
                    <el-table v-loading="loading" :data="tableData" height="300"  border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange" @sort-change="handleSortChange"> 
                        <el-table-column type="selection" width="45"></el-table-column> 
                        <el-table-column prop="ROLENAME" label="名称" width="150" ></el-table-column> 
                        <!-- <el-table-column prop="code" label="检索代码" width="120"></el-table-column>  -->
                        <!-- <el-table-column prop="roletype" label="类型" width="100" :formatter="formatter" ></el-table-column>  -->
                        <el-table-column prop="ROLEDESC" label="角色描述" ></el-table-column> 
                    </el-table> 
            </div>
            <!-- 数据列表END -->
            <!-- 翻页导航条 -->
            <div class="navigate-box">
                <div class="pagination">
                    <el-pagination background @current-change="handleCurrentChange" :total="parampters.totalCount" @size-change="handleSizeChange"
                            :current-page.sync="parampters.pageIndex" :page-sizes="[20, 50, 100, 200]" :page-size="parampters.pageRows"
                            layout="total, sizes, prev, pager, next">
                        </el-pagination>  
                </div>
            </div>
            <!-- 翻页导航条END -->
        </div>
        <!-- 主体区END -->
    </div>
    <div class="footer">
            <el-button @click="handleCancel()">取 消</el-button>
            <el-button type="primary" @click="handleOk()">确 定</el-button>
   </div>

</div>
</template>

<script>
    // import { mapGetters } from 'vuex'
    // import { BASEURL_UIM } from "@/utils/config"
    export default {
        data() {
            return {
                // 筛选条件
                parampters: {
                    //查询参数
                    modeid:'',
                    rolename:'',
		            code:'', 
                    loginsid:'',//登录会话SID
                    pageRows:20,//每页行数
                    pageCount:0,//总页数
                    pageIndex:0,//当前页
                    totalCount:0 //总记录数 
                },
                // 加载用户数据加载框标识
                loading: false,
                // 查询出的表格数据
                tableData: [],
                // 表格多选数据数组
                multipleSelection: [],
                // 表格操作数据所在行的索引
                idx: -1,
                //confirm提示信息弹框
                confirmBox: null,
                //所选记录id
                selectedId: '', 
                //事物类型
                actType: 'list'
            }
        },
        // 进入页面加载数据
        mounted() {
             
            this.handleInitLoad();
        },
        //离开页面销毁定时器 
        deactivated(){

        },
        computed: {
            exapm:{
                cache:false,
                get:function(){
                    return Date.now() 
                }
            },
            //？？？？？BUG
            // ...mapGetters([
            //     'loginInfo'
            // ])
        },
        props: {
            sourceData: {
                required: true,
            }
        },
        methods: {
            /**
             * @augments column
             * @augments prop 排序字段
             * @augments order  排序顺序 ascending 升序  descending 降序
             * 排序点击方法
             */
            handleSortChange(column, prop, order) {
                console.log(column, prop, order);
                if (order == 'ascending') { 
                    // 升序
                } else if (order == 'descending') {
                    // 降序 
                }
            },
            /**
             * @augments  row 行所在的数据
             * 表格数据列 内容字典转换
             */
            formatter(row, column) {
                if(column.property=='roletype'){
                    if(row.roletype==1){
                        return "系统"; 
                    }else{
                        return "扩展"; 
                    }
                }
                return "";
            },

            /**
             * @augments val  多选数组
             * 表格多选数据
             */
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            /**
             * @augments val 页码
             * 切换页码操作
             */
            handleCurrentChange(val) {
                this.parampters.pageIndex = val;
                // 重新获取当前页码的数据
                this.searchLoad();
            },

            /**
             * @augments val 每页显示条数
             * 每页显示条数修改
             */
            handleSizeChange(val) {
                // 修改每页显示条数
                this.parampters.pageRows = val;
                // 重新获取数据
                this.searchLoad();
            },

            /**
             * 组件初始化加载
             */
            handleInitLoad() {
                this.searchLoad();
            },

            //勾选指定行
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            /**
             * 条件筛选查询,加载数据
             */
            searchLoad() {           
                this.parampters = this.$util.trimObjStr(this.parampters); 
                this.parampters.loginsid = this.sourceData.loginsid;
                this.parampters.modeid = this.sourceData.modeid ;
                this.loading = true; 
                this.$axios.get(this.httpRoot.BASEURL_UIM + 'rest/uim/ams/amsrolemodel/tomoderoles', {
                    params: this.parampters
                }).then((res) => { 
                    if (res.data.result == 'true') {
                        let data = res.data; //
                        this.parampters.pageIndex = parseInt(data.pageIndex);
                        this.parampters.pageCount = parseInt(data.pageCount);
                        this.parampters.totalCount = parseInt(data.totalCount);
                        this.tableData = data.resultData;
                        //初始勾选
                        var selers = [];
                        for(var i=0;i<this.tableData.length;i++ ){
                            if(this.tableData[i].chk=='1'){ 
                                selers.push(this.tableData[i]) ;
                            }
                        } 
                        setTimeout(()=>{
                            this.toggleSelection( selers ) ; 
                        },20);
                        this.loading = false;
                    } else {
                        this.$error('查询失败' + res.data.resultMessage + ",错误代码:" + res.data.resultCode);
                        this.loading = false;
                    }
                }).catch(function (error) {
                    //console.log(error);
                });
            },

            /**
             * 保存模块角色
             */
            saveModeRoles(){
                var chkids ="";
                for(var i=0;i<this.multipleSelection.length;i++ ){
                    chkids += ","+this.multipleSelection[i].id ; 
                }
                if(chkids.length>0){
                    chkids = chkids.substring(1);
                }
                var unchkids ="";
                for(var i=0;i<this.tableData.length;i++ ){
                    if( (','+chkids+',').indexOf( ','+this.tableData[i].id+',')<0 ){
                        unchkids += ","+this.tableData[i].id ; 
                    } 
                }
                if(unchkids.length>0){
                    unchkids = unchkids.substring(1);
                } 
                var datain = {
                    loginsid:this.sourceData.loginsid,
                    modeid: this.sourceData.modeid,
                    roleids:chkids,
                    unroleids:unchkids
                } ;
                // 
                var url = this.httpRoot.BASEURL_UIM + 'rest/uim/ams/amsrolemodel/savemoderoles' ;
                this.loading = true;
                this.$axios.post(url, datain
                ).then((res) => {
                    if (res.data.result == 'true') {
                        this.$message.success( res.data.resultMessage );
                        this.loading = false; 
                        this.handleCancel();  //请求成功后关闭
                    } else {
                        this.$error('保存失败' + res.data.resultMessage + ",错误代码:" + res.data.resultCode);
                        this.loading = false;
                    }
                }).catch(function (error) {
                    //console.log(error);
                });
            },

            /**
             * 
             */
            handleCancel() {
                this.$emit('cancel',this.cancelData)
            },

            /**
             * 
             */
            handleOk() {
                this.saveModeRoles() ;
                //this.okData = this.tableData;
                //this.$emit('ok',this.okData)
                //this.saveModeRoles() ;
            }
            
        }
    }

</script>
